<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>访问当当购物车页面节点</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>

<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span id="closewin">关闭</span>
    </div>
    <div class="cartList" id="cartList">
        <ul> 
            <li style="display: none">白岩松：白说</li>
            <li>¥<input type="text" name="price" value="21.5"></li>
            <li><input type="button" name="minus" value="-" class="minus"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" class="plus"></li>
            <li>¥21.90</li>
            <li><p  class="collect">移入收藏</p><p class="del">删除</p></li>
        </ul>
        <ul>
            <li style="display: none">岛上书店</li>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-" class="minus"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" class="plus"></li>
            <li>¥24.00</li>
            <li><p  class="collect">移入收藏</p><p class="del">删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">￥0.00</li>
            <li><span onclick="showOrder()">结 算</span></li>
        </ol>
    </div>
    <div id="divResult"></div>
</div>
</body>
  <script>
    window.onload=function(){
        // 关闭窗口
        var closewin=document.getElementById("closewin");
        closewin.addEventListener("click",function(){
            var flag=confirm("您确定要关闭吗？");
            if(flag){
                window.close();

            }
        })
        // 移入收藏夹
        var collects=document.querySelectorAll(".collect");
        for(var i=0;i<collects.length;i++){
            collects[i].addEventListener("click",function(){
              var falg=confirm("移入收藏夹后，将不再购物车中显示，是否继续操作?");
              if (falg){
                  alert("移入收藏夹成功");
              }
            },false)   
        }
        // 单个删除
        var delects =document.getElementsByClassName("del");
        var cartList= document.getElementById("cartList");
        for(var i=0;i<delects.length;i++){
            delects[i].addEventListener("click",function(){
                var falg=confirm("你确定要删除次商品？");
                if (falg){
                    var delUL=this.parentElement.parentElement;
                    cartList.removeChild(delUL);
                }
            })
        }
        // 增加商品数量
        var pluses=document.getElementsByName("plus");
        var prices=document.getElementsByName("price");
        for(var i=0 ; i<pluses.length;i++){
            pluses[i].index=i;
            pluses[i].addEventListener("click",function(){
                var oAmount=this.previousElementSibling;
                var count =parseInt(oAmount.value)+1;
                oAmount.value=count;
                var price=prices[this.index].value;
                var total=parseFloat(price*count).toFixed(2);
                var oLi=this.parentElement.nextElementSibling;
                oLi.innerHTML="￥"+total;
                computeAmount();
            })
        }
        //减少商品数量
        var minus=document.getElementsByClassName("minus");
        for(var i =0;i <minus.length;i++){
            minus[i].index=1;
            minus[i].addEventListener("click",function(){
                var oAmount=this.nextElementSibling;
                var count=parseInt(oAmount.value)-1;
                if(count<1){
                    alert("不能在减少了");
                    return;
                }
                oAmount.value=count;
                var price=prices[this.index].value;
                var total=parseFloat(price*count).toFixed(2);
                var oLi=this.parentElement.nextElementSibling;
                oLi.innerHTML="￥"+total;
                computeAmount();

            })
        }
        function computeAmount(){
            var prices=document.getElementsByName("price");
            var amounts=document.getElementsByName("amount");
            var totalPrice=0;
            for(var i=0;i<prices.length;i++){
                totalPrice+=prices[i].value*amounts[i].value;
            }
            document.getElementById("totalPrice").innerHTML="￥"+totalPrice.toFixed(2);
        }
        computeAmount();
    }
    // 结算
    function showOrder(){
        var str="您本次购买的商品信息如下：</br>";
        var cartList=document.getElementById("cartList");
        var total="$0.00";
        for(var i=0 ;i<cartList.children.length;i++){
            var element=cartList.children[i];
            if(element.tagName=="UL"){
                var title=element.children[0].innerHTML;
                var subTotal=element.children[3].innerHTML;
                str+=title+":"+subTotal+"</br>";
            }
            else
            if(element.tagName=="OL"){
                total=element.children[0].innerHTML;

            }
        }
        str+="商品共计："+total;
        document.getElementById("divResult").innerHTML=str;
        
    }
  </script>
</html>